<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <title>登录</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="{{ env('APP_KEYWORDS', '') }}">
    <meta name="description" content="{{ env('APP_DESCRIPTION', '') }}">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <!-- Styles -->
    <link href="{{ asset('js/layui/css/layui.css') }}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{ asset('js/jquery-1.11.2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/layer/layer.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/layui/layui.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/main.js') }}"></script>
    <link rel="shortcut icon" href="favicon.ico" />
    <base target="_self">
    <style>
        .title-title {
            margin: 15px 0;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #1F98CA;
        }
        .login-mobile-btn {
            text-align: center;
            width: 40%;
            margin: 10px auto;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            border-radius: 4px;
            background-color: #409EFF;
            color: #eee;
        }
    </style>
</head>
<body>
<div class="title-title">登录</div>
<form class="layui-form" style="width: 90%">
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="mobile" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">验证码</label>
        <div class="layui-input-inline" style="width: 45%;">
            <input type="text" name="sms_code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline" style="width: 110px">
            <button class="layui-btn" lay-submit lay-filter="getSmsCode" id="sms-code-btn">获取验证码</button>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="commitForm">登录</button>
        </div>
    </div>

</form>
<div>
    <div class="login-mobile-btn" onclick="wxLogin()">微信扫码登录</div>
</div>

<script>
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(commitForm)', function(data){
            if (data.field.sms_code === '') {
                layer.msg('请输入验证码');
                return false;
            }
            if (data.field.mobile === '') {
                layer.msg('请输入手机号');
                return false;
            }
            sendRequest('POST', '{{route("index.login", "")}}',data.field, function (response) {
                layer.msg('登录成功',function () {
                    layer.closeAll();
                    // parent.layer.closeAll(); //如果设定了yes回调，需进行手工关闭
                    parent.location.href = '/userCenter'
                });
            })
            return false;
        });

        form.on('submit(getSmsCode)', function(data){
            if (data.field.mobile === '') {
                layer.msg('请输入手机号');
                return false;
            }
            sendRequest('POST', '{{route("getSmsCode", "")}}',data.field, function (response) {
                layer.msg('发送短信成功，请注意查收');
                sendSmsCodeSuc();
            })
            return false;
        });

        form.on('submit(wxLogin)', function(data){
            wxLogin()
            return false;
        });
    });

    function sendSmsCodeSuc() {
        $("#sms-code-btn").attr('disabled', 'true').addClass('layui-btn-disabled');
        let sec = 60;
        setTimeout(function () {
            $("#sms-code-btn").html('获取验证码('+(sec - 1)+')')
        }, 1000)
        let djs = setInterval(function () {
            if (sec === 0) {
                clearInterval(djs);
                $("#sms-code-btn").attr('disabled', 'false').removeClass('layui-btn-disabled').html('获取验证码')
                return;
            }
            $("#sms-code-btn").html('获取验证码('+sec+')')
            sec--;
        }, 1000)
    }

    function wxLogin() {
        parent.layer.closeAll();
        parent.openLoginPage()
    }
</script>

</body>
</html>
